<template>
  <div>
    <ul>
      <li v-for="item in messageList" :key="item.id">
        <!--跳转路由并携带params参数，to的字符串写法,但是要在配置项的path中使用占位符/:id/:content-->
        <!-- <router-link :to="`/home/messages/detail/${item.id}/${item.content}`">{{
          item.content
        }}</router-link> -->

        <!--跳转路由并携带params参数，to的对象写法，但是要在配置项的path中使用占位符/:id/:content-->
        <router-link
          :to="{
            name: 'xiangqing', //不能用path只能用name
            params: {
              id: item.id,
              content: item.content,
            },
          }"
          >{{ item.content }}</router-link
        >
        <button @click="pushShow(item)">push查看</button>
        <button @click="replaceShow(item)">replace查看</button>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      messageList: [
        { id: "001", content: "消息一" },
        { id: "002", content: "消息二" },
        { id: "003", content: "消息三" },
      ],
    };
  },
  methods: {
    pushShow(item) {
      this.$router //是路由器上的方法，不是route上的方法
        .push({
          name: "xiangqing", //不能用path只能用name
          params: {
            id: item.id,
            content: item.content,
          },
        })
        .catch(() => {});
    },
    replaceShow(item) {
      this.$router
        .replace({
          name: "xiangqing", //不能用path只能用name
          params: {
            id: item.id,
            content: item.content,
          },
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
</style>